<template>
	<view>
		<view class="tabbar-line">

		</view>
		<view class="content-box">
			<view class="user-box">
				<image class="user-back" :src="$img('/static/2021-08-30/vip-user-back.png')" mode="widthFix"></image>
				<view class="user-content">
					<view class="top">
						<image class="left" v-if="user" :src="user.avatar" mode=""></image>
						<view class="right">
							<view class="top" v-if="user">
								{{user.nickname}}
								<image class="right" v-if="member && member.is_vip == 1"
									:src="$img('/static/2021-08-30/vip5.png')" mode="widthFix"></image>
							</view>
							<view class="bottom" v-if="user">
								我的邀请码:{{user.id}}
							</view>
						</view>
					</view>
					<view class="bottom" v-if="member">
						我的VIP到期：{{member.time}}
					</view>
				</view>
			</view>
			<view class="open-vip">
				开通 <image class="vip-font" :src="$img('/static/2021-08-30/vip-font.png')" mode="widthFix"></image>
				即可尊享报名8折优惠
			</view>
			<view class="open-vip-select" v-if="member_price_list.length > 0">
				<view class="open-vip-option" v-for="i,j in member_price_list" v-if="member_price_select && member_price_select.id" :class="{'open-vip-option-select':member_price_select.id == i.id}" :key="j" @tap="vip_select(i)">
					<view class="label" v-if="i.status == 1">
						推荐
					</view>
					<view class="label" v-if="i.status == 2">
						热销
					</view>
					<view class="text1" v-if="i && i.title">
						{{i.title}}
					</view>
					<view class="text2" v-if="i && i.original_price">
						<text>￥</text>{{i.original_price}}
					</view>
					<view class="text3" v-if="i && i.original_price">
						￥{{i.original_price}}
					</view>
					<view class="text4" v-if="i && i.remarks">
						<image class="left" :src="$img('/static/2021-08-30/nb.png')" mode="widthFix"></image>
						{{i.remarks}}
					</view>
				</view>
				<!-- <view class="open-vip-option" :class="{'open-vip-option-select':vipSelect == 2}" @tap="vip_select(2)">
					<view class="text1">
						三个月
					</view>
					<view class="text2 text2-blue">
						<text>￥</text>26.8
					</view>
					<view class="text3">
						￥29.7
					</view>
					<view class="text4 text4-2">
						9折优惠
					</view>
				</view>
				<view class="open-vip-option" :class="{'open-vip-option-select':vipSelect == 3}" @tap="vip_select(3)">
					<view class="label">
						热销
					</view>
					<view class="text1">
						一个月
					</view>
					<view class="text2 text2-blue">
						<text>￥</text>9.9
					</view>
					<view class="text3">
						￥9.9
					</view>
					<view class="text4 text4-2">
						经济实惠
					</view>
				</view> -->
			</view>
			<view class="now-open-vip" @tap="pay()">
				现在开通
			</view>
			<view class="my-invitation-title">
				<view class="title-line">

				</view>
				我的邀请
			</view>
			<view class="my-invitation" v-for="i,j in myInvitation.list" :key="j">
				<view class="left">
					<image class="left" v-if="i && i.avatar" :src="i.avatar" mode=""></image>
					<view class="right">
						<view class="top">
							<text class="left" v-if="i && i.nickname">{{i.nickname}}</text>
							<image class="right" :src="$img('/static/2021-08-30/vip5.png')" mode=""></image>
						</view>
						<view class="bottom">
							<view class="left">
								<image class="left" :src="$img('/static/2021-08-30/nv.png')" mode=""></image>{{i.age}}
							</view>
							<view class="right" v-if="false">
								珠海
							</view>
						</view>
					</view>
				</view>
				<view class="right">
					<view class="top">
						{{i.created_at}}
					</view>
					<view class="bottom">
						查看
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let $vue;
	export default {
		data() {
			return {
				vipSelect: 1,
				user: null,
				member: null,
				member_price_list: [], //vip充值数组
				member_price_select: null, //选择的vip充值
				myInvitation: {
					page: 1,
					list: [],
					get_data(cz) {
						if (cz) {
							this.page = 1;
							this.list = [];
						}
						let data = {
							page: this.page
						}
						$vue.$utils.postrequest('/api/member/myInvite', data, res => {
							if (res.code == 200) {
								this.list = [...this.list, ...res.data];
								this.page++
							}
						})

					}
				}
			};
		},
		onLoad() {
			$vue = this;
			this.get_data();

		},
		onReachBottom() {
			// console.log("触底");
			this.myInvitation.get_data();
		},
		methods: {
			get_data() {
				this.$utils.request('/api/member', {}, res => {
					this.user = res.data.user;
					this.member = res.data.member;
					this.member_price_list = res.data.member_price_list;
					this.member_price_select = this.member_price_list[0];
				})
				this.myInvitation.get_data(true);
			},
			vip_select(item) {
				this.member_price_select = item;
			},
			pay() {
				let data = {
					id: this.member_price_select.id
				}
				this.$utils.postrequest("/api/member/add", data, res => {
					if (res) {
						if (res.code === 200) {
							uni.showToast({
								icon: 'success',
								title: res.message
							})
							// setTimeout(() => {
							// 	uni.switchTab({
							// 		url: "/pages/my/index"
							// 	})
							// }, 1500)
						} else {
							uni.showToast({
								icon: 'none',
								title: res.message
							})
							setTimeout(()=>{
								uni.navigateTo({
									url:"/pages/my/myBack/rechargeBalance/rechargeBalance"
								})
							},1000)
							
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: '请检查您的网络'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./vip-center.scss";
</style>
